<template>
	<div class="roleContent">
		<div class="role">
			<div class="authTop">
				角色列表
			</div>
			<div class="add">
				<Button type="primary" class="fr" @click="add">添加</Button>
			</div>
			<div class="roleList">
				<div tabindex='1' v-for="(item,index) of roleList" :key="index" @click="roleDetail(item.id)">
					<span v-text="item.roleName"></span>
					<Button type="primary" style="margin-right: 5px;" @click="updateRole(item.id)">修改</Button>
					<Button type="error" @click="delRole(item.id)">删除</Button>
				</div>
			</div>
		</div>
		<div class="authority">
			<!-- <div class="mark">
			</div> -->
			<div class="authTop">
				权限信息
			</div>
			<div class="authorityList">
				<Tree :data="authority" show-checkbox ref="authorityTree"></Tree>
			</div>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>
		<Modal v-model="addRoleModal" title="添加角色" :mask-closable="false">
			<Form :label-width="100">
				<FormItem label="用户角色" prop="usernumber">
					<Input type="text" placeholder="请输入用户角色" class="w200 m-r10" v-model="authorityName" />
				</FormItem>

				<FormItem label="" prop="usernumber" style="overflow-x: auto;height: 500px;">
					<Tree :data="addAuthority" show-checkbox ref="addAuthorityTree"></Tree>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="clearAdd">取消</Button>
				<Button type="primary" size="large" @click="addConfirm">确定</Button>
			</div>
		</Modal>
		<Modal v-model="updateRoleModal" title="修改角色" :mask-closable="false" @on-ok="updateConfirm" @on-cancel="clearAdd">
			<Form :label-width="100">
				<FormItem label="用户角色" prop="usernumber">
					<Input type="text" placeholder="请输入用户角色" class="w200 m-r10" v-model="updateAuthorityName" />
				</FormItem>
				<FormItem label="" prop="usernumber" style="overflow-x: auto;height: 350px;">
					<Tree :data="updateAuthority" show-checkbox ref="updateAuthorityTree"></Tree>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				roleList: [],
				spinShow: false,
				addRoleModal: false,
				updateRoleModal: false,
				updateAuthorityName: '',
				authorityName: '',
				updateAutorityId: '',
				updateAuthority: [{
						title: '首页',
						checked: false,
						expand: true,
						id: 1,
						children: [{
								title: '财务统计汇总',
								checked: false,
								id: 16,
							}
							// ,
							// {
							// 	title: '最新交易记录',
							// 	checked: false,
							// 	id: 5,
							// }
						]
					},
					{
						title: '账户管理',
						checked: false,
						expand: true,
						id: 6,
						children: [{
								title: '运营管理账户',
								checked: false,
								id: 7,
							},
							{
								title: '角色管理',
								checked: false,
								id: 8,
							},
							{
								title: '会员列表',
								checked: false,
								id: 9,
							},
						]
					},
					{
						title: '财务管理',
						checked: false,
						expand: true,
						id: 15,
						children: [
							{
								title: '提现审核',
								checked: false,
								id: 17,
							},
							{
								title: '充值列表',
								checked: false,
								id: 18,
							},
							{
								title: '转入列表',
								checked: false,
								id: 19,
							},
							{
								title: '获赠列表',
								checked: false,
								id: 20,
							},
							{
								title: '释放列表',
								checked: false,
								id: 77,
							},
							{
								title: '直推列表',
								checked: false,
								id: 78,
							}
						]
					},
					{
						title: '运营推广',
						checked: false,
						expand: true,
						id: 28,
						children: [{
								title: 'banner图管理',
								checked: false,
								id: 29,
							},{
								title: '公告管理',
								checked: false,
								id: 30,
							},
							{
								title: '资讯管理',
								checked: false,
								id: 31,
							}
						]
					},
					{
						title: '参数配置',
						checked: false,
						expand: true,
						id: 32,
						children: [{
								title: '全局配置',
								checked: false,
								id: 33,
							},{
								title: '释放配置',
								checked: false,
								id: 79,
							},{
								title: '上传功能',
								checked: false,
								id: 44,
							}
						]
					}, {
						title: '登录日志',
						checked: false,
						id: 37,
						children: []
					}
				],
				addAuthority: [{
						title: '首页',
						checked: false,
						expand: true,
						id: 1,
						children: [{
								title: '财务统计汇总',
								checked: false,
								id: 16,
							}
							// ,
							// {
							// 	title: '最新交易记录',
							// 	checked: false,
							// 	id: 5,
							// }
						]
					},
					{
						title: '账户管理',
						checked: false,
						expand: true,
						id: 6,
						children: [{
								title: '运营管理账户',
								checked: false,
								id: 7,
							},
							{
								title: '角色管理',
								checked: false,
								id: 8,
							},
							{
								title: '会员列表',
								checked: false,
								id: 9,
							},
						]
					},
					{
						title: '财务管理',
						checked: false,
						expand: true,
						id: 15,
						children: [
							{
								title: '提现审核',
								checked: false,
								id: 17,
							},
							{
								title: '充值列表',
								checked: false,
								id: 18,
							},
							{
								title: '转入列表',
								checked: false,
								id: 19,
							},
							{
								title: '获赠列表',
								checked: false,
								id: 20,
							},
							{
								title: '释放列表',
								checked: false,
								id: 77,
							},
							{
								title: '直推列表',
								checked: false,
								id: 78,
							}
						]
					},
					{
						title: '运营推广',
						checked: false,
						expand: true,
						id: 28,
						children: [{
								title: 'banner图管理',
								checked: false,
								id: 29,
							},{
								title: '公告管理',
								checked: false,
								id: 30,
							},
							{
								title: '资讯管理',
								checked: false,
								id: 31,
							}
						]
					},
					{
						title: '参数配置',
						checked: false,
						expand: true,
						id: 32,
						children: [{
								title: '全局配置',
								checked: false,
								id: 33,
							},{
								title: '释放配置',
								checked: false,
								id: 79,
							},{
								title: '上传功能',
								checked: false,
								id: 44,
							}
						]
					}, {
						title: '登录日志',
						checked: false,
						id: 37,
						children: []
					}
				],
				authority: [{
						title: '首页',
						checked: false,
						expand: true,
						id: 1,
						children: [{
								title: '财务统计汇总',
								checked: false,
								id: 16,
							}
							// ,
							// {
							// 	title: '最新交易记录',
							// 	checked: false,
							// 	id: 5,
							// }
						]
					},
					{
						title: '账户管理',
						checked: false,
						expand: true,
						id: 6,
						children: [{
								title: '运营管理账户',
								checked: false,
								id: 7,
							},
							{
								title: '角色管理',
								checked: false,
								id: 8,
							},
							{
								title: '会员列表',
								checked: false,
								id: 9,
							},
						]
					},
					{
						title: '财务管理',
						checked: false,
						expand: true,
						id: 15,
						children: [
							{
								title: '提现审核',
								checked: false,
								id: 17,
							},
							{
								title: '充值列表',
								checked: false,
								id: 18,
							},
							{
								title: '转入列表',
								checked: false,
								id: 19,
							},
							{
								title: '获赠列表',
								checked: false,
								id: 20,
							},
							{
								title: '释放列表',
								checked: false,
								id: 77,
							},
							{
								title: '直推列表',
								checked: false,
								id: 78,
							}
						]
					},
					{
						title: '运营推广',
						checked: false,
						expand: true,
						id: 28,
						children: [{
								title: 'banner图管理',
								checked: false,
								id: 29,
							},{
								title: '公告管理',
								checked: false,
								id: 30,
							},
							{
								title: '资讯管理',
								checked: false,
								id: 31,
							}
						]
					},
					{
						title: '参数配置',
						checked: false,
						expand: true,
						id: 32,
						children: [{
								title: '全局配置',
								checked: false,
								id: 33,
							},{
								title: '释放配置',
								checked: false,
								id: 79,
							},{
								title: '上传功能',
								checked: false,
								id: 44,
							}
						]
					}, {
						title: '登录日志',
						checked: false,
						id: 37,
						children: []
					}
				]
			}
		},
		mounted() {
			this.getAllRole();
		},
		methods: {
			clearAllAuthorityTree() {
				this.authority.forEach((item, index) => {
					item.checked = false;
					item.children.forEach((child, cIndex) => {
						child.checked = false;
					})
				})
			},
			getAllRole() {
				this.axios.get('admin/account/admin/platform/allRoles').then(res => {
					if(res.data.code == 200) {
						this.roleList = res.data.data;
					}
				})
			},
			addConfirm() {
				let getCheck = this.$refs.addAuthorityTree.getCheckedAndIndeterminateNodes();
				let authorityId = [];
				getCheck.forEach((item, index) => {
					authorityId.push(item.id);
				})
				let param = this.qs.stringify({
					roleName: this.authorityName,
					permissions: authorityId,
				});
				this.axios.post('/admin/account/role/add', param).then(res => {
					if(res.data.code == 200) {
						this.clearAdd();
						this.getAllRole();
						this.clearAllAuthorityTree();
						this.$Message.info(res.data.msg);
					} else {
						this.$Message.info(res.data.msg);
					}
				})
			},
			updateConfirm() {
				let getCheck = this.$refs.updateAuthorityTree.getCheckedAndIndeterminateNodes();
				let authorityId = [];
				getCheck.forEach((item, index) => {
					authorityId.push(item.id);
				})
				let param = this.qs.stringify({
					id: this.updateAuthorityId,
					roleName: this.updateAuthorityName,
					permissions: authorityId,
				});
				this.axios.post('/admin/account/role/update', param).then(res => {
					if(res.data.code == 200) {
						this.clearAllAuthorityTree();
						this.getAllRole();
						this.$Message.info(res.data.msg);
					} else {
						this.$Message.info(res.data.msg);
					}
				})
			},
			clearAdd() {
				this.addAuthority.forEach((item, index) => {
					item.checked = false;
					item.children.forEach((child, cIndex) => {
						child.checked = false;
					})
				})
				this.updateAuthority.forEach((item, index) => {
					item.checked = false;
					item.expand = true;
					item.children.forEach((child, cIndex) => {
						child.checked = false;
					})
				})
				this.updateAuthorityName = '';
				this.addAuthorityName = '';
				this.authorityName = '';
				this.addRoleModal = false;
			},
			delRole(id) {
				let $this = this;
				this.$Modal.confirm({
					title: '删除用户角色',
					content: '是否要删除用户角色？',
					onOk: function() {
						$this.axios.delete('/admin/account/role/delete/' + id).then(res => {
							if(res.data.code == 200) {
								$this.$Message.info(res.data.msg);
								$this.getAllRole();
								$this.clearAllAuthorityTree();
							} else {
								$this.$Message.info(res.data.msg);
							}
						})
					}
				});
			},
			updateRole(id) {
				this.updateRoleModal = true;
				this.updateAuthorityId = id;
				this.axios.get('/admin/account/role/get/' + id).then(res => {
					if(res.data.code == 200) {
						let authorize = res.data.data.permissions;
						this.updateAuthorityName = res.data.data.roleName;
						this.spinShow = false;

						if(authorize.indexOf(37) != -1) {
							this.updateAuthority[5].checked = true;
						}

						if(authorize.indexOf(32) != -1) {
							//								this.authority[5].checked = true;
							//								this.updateAuthority[5].checked = true;
						}
						if(authorize.indexOf(33) != -1) {
							this.updateAuthority[4].children[0].checked = true;
						}
						if(authorize.indexOf(79) != -1) {
							this.updateAuthority[4].children[1].checked = true;
						}
						if(authorize.indexOf(44) != -1) {
							this.updateAuthority[4].children[2].checked = true;
						}

						if(authorize.indexOf(28) != -1) {
							//								this.authority[4].checked = true;
							//								this.updateAuthority[4].checked = true;
						}
						if(authorize.indexOf(29) != -1) {
							this.updateAuthority[3].children[0].checked = true;
						}
						if(authorize.indexOf(30) != -1) {
							this.updateAuthority[3].children[1].checked = true;
						}
						if(authorize.indexOf(31) != -1) {
							this.updateAuthority[3].children[2].checked = true;
						}
						if(authorize.indexOf(15) != -1) {
							//								this.authority[3].checked = true;
							//								this.updateAuthority[3].checked = true;
						}
						if(authorize.indexOf(17) != -1) {
							this.updateAuthority[2].children[0].checked = true;
						}
						if(authorize.indexOf(18) != -1) {
							this.updateAuthority[2].children[1].checked = true;
						}
						if(authorize.indexOf(19) != -1) {
							this.updateAuthority[2].children[2].checked = true;
						}
						if(authorize.indexOf(20) != -1) {
							this.updateAuthority[2].children[3].checked = true;
						}
						if(authorize.indexOf(77) != -1) {
							this.updateAuthority[2].children[4].checked = true;
						}
						if(authorize.indexOf(78) != -1) {
							this.updateAuthority[2].children[5].checked = true;
						}
						
						if(authorize.indexOf(6) != -1) {
							//								this.authority[3].checked = true;
							//								this.updateAuthority[3].checked = true;
						}
						if(authorize.indexOf(7) != -1) {
							this.updateAuthority[1].children[0].checked = true;
						}
						if(authorize.indexOf(8) != -1) {
							this.updateAuthority[1].children[1].checked = true;
						}
						if(authorize.indexOf(9) != -1) {
							this.updateAuthority[1].children[2].checked = true;
						}

						if(authorize.indexOf(1) != -1) {
							//								this.authority[0].checked = true;
							//								this.updateAuthority[0].checked = true;
						}
						if(authorize.indexOf(16) != -1) {
							this.updateAuthority[0].children[0].checked = true;
						}

					}
				})
			},
			add() {
				this.addRoleModal = true;
			},
			roleDetail(id) {
				this.spinShow = true;
				this.clearAllAuthorityTree();
				this.axios.get('/admin/account/role/get/' + id).then(res => {
					if(res.data.code == 200) {
						let authorize = res.data.data.permissions;
						this.updateAuthorityName = res.data.data.roleName;
						this.spinShow = false;

						if(authorize.indexOf(37) != -1) {
							this.authority[5].checked =true;
						}

						if(authorize.indexOf(32) != -1) {
							//								this.authority[5].checked = true;
							//								this.updateAuthority[5].checked = true;
						}
						if(authorize.indexOf(33) != -1) {
							this.authority[4].children[0].checked = true;
						}
						if(authorize.indexOf(79) != -1) {
							this.authority[4].children[1].checked = true;
						}
						if(authorize.indexOf(44) != -1) {
							this.authority[4].children[2].checked = true;
						}

						if(authorize.indexOf(28) != -1) {
							//								this.authority[4].checked = true;
							//								this.updateAuthority[4].checked = true;
						}
						if(authorize.indexOf(29) != -1) {
							this.authority[3].children[0].checked = true;
						}
						if(authorize.indexOf(30) != -1) {
							this.authority[3].children[1].checked = true;
						}
						if(authorize.indexOf(31) != -1) {
							this.authority[3].children[2].checked = true;
						}
						if(authorize.indexOf(15) != -1) {
							//								this.authority[3].checked = true;
							//								this.updateAuthority[3].checked = true;
						}
						if(authorize.indexOf(17) != -1) {
							this.authority[2].children[0].checked = true;
						}
						if(authorize.indexOf(18) != -1) {
							this.authority[2].children[1].checked = true;
						}
						if(authorize.indexOf(19) != -1) {
							this.authority[2].children[2].checked = true;
						}
						if(authorize.indexOf(20) != -1) {
							this.authority[2].children[3].checked = true;
						}
						if(authorize.indexOf(77) != -1) {
							this.authority[2].children[4].checked = true;
						}
						if(authorize.indexOf(78) != -1) {
							this.authority[2].children[5].checked = true;
						}
						
						if(authorize.indexOf(6) != -1) {
							//								this.authority[3].checked = true;
							//								this.updateAuthority[3].checked = true;
						}
						if(authorize.indexOf(7) != -1) {
							this.authority[1].children[0].checked = true;
						}
						if(authorize.indexOf(8) != -1) {
							this.authority[1].children[1].checked = true;
						}
						if(authorize.indexOf(9) != -1) {
							this.authority[1].children[2].checked = true;
						}

						if(authorize.indexOf(1) != -1) {
							//								this.authority[0].checked = true;
							//								this.updateAuthority[0].checked = true;
						}
						if(authorize.indexOf(16) != -1) {
							this.authority[0].children[0].checked = true;
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.roleContent {
		position: relative;
		display: flex;
		margin-top: 20px;
		font-size: 14px;
		justify-content: center;
		.role {
			width: 42%;
			background: #FFFFFF;
			height: calc(~'100vh - 160px');
			margin-right: 100px;
			border: 1px solid #e1e0e0;
			.add {
				padding: 15px;
				border-bottom: 1px solid #e1e0e0;
				margin-bottom: 0;
			}
			.roleList div {
				padding: 15px;
				text-align: right;
				position: relative;
				border-bottom: 1px solid #e1e0e0;
				span {
					position: absolute;
					left: 15px;
					line-height: 32px;
				}
			}
			.roleList div:focus {
				background: #eeeeee;
				outline: none;
			}
		}
		.authority {
			width: 42%;
			background: #FFFFFF;
			height: calc(~'100vh - 160px');
			border: 1px solid #e1e0e0;
			position: relative;
			.authorityList {
				padding: 15px;
				overflow: hidden;
				height: calc(~'100vh - 213.5px');
				.ivu-tree {
					overflow-y: auto;
					height: calc(~'100vh - 250.5px');
				}
			}
			.mark {
				// position: absolute;
				height: calc(~'100vh - 160px');
				width: calc(~'100% - 15px');
				z-index: 999;
				/* IE */
				filter: alpha(opacity=0);
				/* 老版Mozilla */
				-moz-opacity: 0;
				/* 老版Safari */
				-khtml-opacity: 0;
				/* 支持opacity的浏览器*/
				opacity: 0;
			}
		}
		.authTop {
			padding: 15px;
			background: #48637d;
			color: #FFFFFF;
		}
	}
	
	/deep/ .ivu-tree-title {
		font-size: 14px;
	}
	
	/deep/ .ivu-tree .ivu-checkbox-wrapper {
		margin-top: 2px;
	}
	
	/deep/ .ivu-checkbox-indeterminate .ivu-checkbox-inner {
		background-color: #FFFFFF;
		border-color: #dcdee2;
	}
</style>